<template>
  <!--附件表-->
  <div>
    <div>
      <el-row>
        <el-col :xs="24" :sm="20">
          <el-form v-model="search" :inline="true">
            <el-form-item label="关键词" prop="name">
              <el-input placeholder="输入搜索关键字" v-model="search.name"
                        clearable/>
            </el-form-item>
            <el-form-item label="附件类型：" prop="mediaType">
              <el-select v-model="search.mediaType" style="width: 160px" placeholder="">
                <el-option
                    v-for="(mediaType,index) in mediaTypeList"
                    :key="index"
                    :value="mediaType"
                    :label="mediaType"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="load">查询</el-button>
              <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="4" style="text-align: right">
          <div style="margin-bottom: 20px">
            <el-button type="primary" size="small" icon="el-icon-upload" @click="uploadClick">上传附件</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <v-empty-data v-if="attachmentList.length===0" style="width: 100px"/>
      <el-row v-loading="listLoading" :gutter="20">
        <el-col v-for="(attachment,index) in attachmentList" :key="attachment.id" :xs="6" :sm="4">
          <div class="attachment-item">
            <div class="img" @click="openDetailDrawer(index)">
              <v-image :src="baseUrl +attachment.thumbPath" :alt="attachment.name">
                <div slot="error">
                  <i v-if="attachment.mediaType.search('image') !== -1" class="el-icon-picture-outline"/>
                  <span v-else>{{ attachment.mediaType }}</span>
                </div>
              </v-image>
            </div>
            <div class="name" :title="attachment.name">{{ attachment.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!-- 附件上传dialog -->
    <attachment-upload ref="uploadAttachment" @handle="handleChild"></attachment-upload>
    <attachment-detail ref="detailAttachment" @handle="handleChild"></attachment-detail>
  </div>
</template>

<script>
import {getAttachmentList} from "@/api/blog/attachment";

import image from "@/components/common/simple-image";
import emptyData from "@/components/common/empty-data"
import attachmentUpload from "./AttachmentUpload"
import attachmentDetail from "./AttachmentDetail"

export default {
  name: "Attachment",
  components: {
    "v-image": image,
    "v-empty-data": emptyData,
    attachmentUpload,
    attachmentDetail
  },
  data() {
    return {
      listLoading: false,
      attachmentList: [],
      search: {},
      mediaTypeList: [],
      currentPage: 0,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.listLoading = true
      const params = {
        name: this.search.name,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      getAttachmentList(params).then(res => {
        this.attachmentList = res.data.records
        this.currentPage = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
        this.listLoading = false
      })
    },
    reset() {
      this.currentPage = 1
      this.pageSize = 10
      this.total = 0
      this.attachmentList = []
      this.loading = false
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.load()
    },
    //抽屉，图片的详细信息
    openDetailDrawer(index) {
      this.$refs.detailAttachment.setData(this.attachmentList[index])
      this.$refs.detailAttachment.openDrawer()
    },
    uploadClick() {
      this.$refs.uploadAttachment.openDialog()
    },
    handleChild(res) {
      this.load()
    }
  },
  computed: {
    server_url: {
      get() {
        return this.$store.state.serverInfo.server_url
      },
    }
  }
}
</script>

<style scoped>
.attachment-item {
  position: relative;
}

.attachment-item > .img {
  border-radius: 5px;
  overflow: hidden;
}

.attachment-item > .img > :hover {
  cursor: pointer;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .2);
  transform: translateY(-2px);
  transition: all .3s;
}

.attachment-item > .name {
  padding: 6px;
  font-size: 12px;
  color: #5a5e66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-box {
  position: absolute;
  top: 5px;
  left: 5px;
}
</style>
